
<template>
    <el-card class="box-card">
        <el-container>
            <!--头部-->
            <el-header>
                <el-row>
                    <el-col :span="12">
                        <!--面包屑-->
                        <div class="grid-content bg-purple">
                            <el-breadcrumb separator-class="el-icon-arrow-right">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item :to="{ path: '/' }">物流信息</el-breadcrumb-item>
                                <el-breadcrumb-item>运输需求</el-breadcrumb-item>

                            </el-breadcrumb>
                        </div>
                    </el-col>

                    <el-col class="kuang-left" :span="12">
                        <div>
                            <div style="margin-bottom: 15px; margin-left: 280px;width: 200px;">
                                <!-- <el-input placeholder="请输入内容" v-model="input3" class="input-with-select"> -->

                                <div class="sousuo">
                                    <input v-model="searchcon" />
                                    <el-button @click="sou">搜索</el-button>
                                </div>


                                <!-- <router-link to="/son" tag="button"></router-link> -->


                            </div>
                            <div>
                                <!--添加-->

                                <div class="tianjia-anniu" style=" margin-left: 520px;width: 55px">
                                    <el-button @click="dialogVisible" style="margin-left: 10px;" type="primary" plain>
                                        添加物流
                                    </el-button>
                                </div>
                                <el-dialog v-if="tianjia" title="提示" :visible.sync="dialogVisible" width="30%"
                                    :before-close="handleClose">
                                    <div>
                                        <el-form label-width="120px" class="demo-ruleForm">
                                            <el-form-item label="发布单位" label-width="120px" style="width: 70%;"
                                                prop="wl_company">
                                                <el-input v-model="ruleForm.wl_company"></el-input>
                                            </el-form-item>
                                            <el-form-item label="货物类型" label-width="120px" style="width: 80%;"
                                                prop="wl_hwstyle">
                                                <el-input v-model="ruleForm.wl_hwstyle"></el-input>
                                            </el-form-item>
                                            <el-form-item label="货物数量(吨)" label-width="150px" style="width: 90%;"
                                                prop="wl_ton">
                                                <el-input v-model="ruleForm.wl_ton"></el-input>
                                            </el-form-item>
                                            <el-form-item label="货物来源地" label-width="140px" style="width: 100%;"
                                                prop="wl_source">
                                                <el-input v-model="ruleForm.wl_source"></el-input>
                                            </el-form-item>
                                            <el-form-item label="运送目的地" label-width="140px" style="width: 100%;"
                                                prop="wl_location">
                                                <el-input v-model="ruleForm.wl_location"></el-input>
                                            </el-form-item>
                                            <el-form-item label="车辆类型" prop="wl_car">
                                                <el-input v-model="ruleForm.wl_car"></el-input>
                                            </el-form-item>
                                            <el-form-item label="货物联系人" label-width="140px" style="width: 100%;"
                                                prop="wl_number">
                                                <el-input v-model="ruleForm.wl_number"></el-input>
                                            </el-form-item>
                                            <el-form-item label="联系人电话" label-width="140px" style="width: 100%;"
                                                prop="wl_telephone">
                                                <el-input v-model="ruleForm.wl_telephone"></el-input>
                                            </el-form-item>
                                            <!-- <div>
                                                <el-form-item>
                                                    <el-button style="margin-right: 40%; margin-top: 5%;" type="primary"
                                                        @click="submitForm('ruleForm')">立即创建
                                                    </el-button>
                                                </el-form-item>
                                            </div> -->
                                        </el-form>
                                    </div>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogVisible">取 消</el-button>
                                        <el-button type="primary" @click="dialogVisible">确 定</el-button>
                                    </span>
                                </el-dialog>
                            </div>

                        </div>

                    </el-col>
                </el-row>
            </el-header>

            <el-main>

                <template>
                    <!--分页实质：利用splice函数对数组进行分割，currentPage代表当前页，items代表每页条数，分割函数的实质是从起点索引到终点索引进行分割
                       ，currentPage-1代表起点索引，items*currentPage，再加一点击事件使得翻页时currentPage+1，使得当前起点索引和终点索引发生变化，使得表内数据
                      传入变化，再调用刷新函数（也就是再重新为表赋值一次，或其他刷新方法）达到分页效果-->
                    <!--表格-->
                    <el-table :data="tableData.light.slice((page-1)*item,item*page)" border style="width: 100%"
                        @row-click="handle">
                        <el-table-column fixed prop="wl_eno" label="广告编号" width="70">
                        </el-table-column>
                        <el-table-column prop="wl_number" label="货物联系人" width="90">
                        </el-table-column>
                        <el-table-column prop="wl_telephone" label="联系电话" width="120">
                        </el-table-column>
                        <el-table-column prop="wl_company" label="发布单位" width="110">
                        </el-table-column>
                        <el-table-column prop="wl_hwstyle" label="货物类型" width="90">
                        </el-table-column>
                        <el-table-column prop="wl_ton" label="货物数量" width="80">
                        </el-table-column>
                        <el-table-column prop="wl_source" label="货物来源地" width="230">
                        </el-table-column>
                        <el-table-column prop="wl_location" label="运送目的地" width="230">
                        </el-table-column>
                        <el-table-column prop="wl_car" label="车辆类型" width="120">
                        </el-table-column>
                        <el-table-column prop="wl_time" label="发布时间" width="140">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">


                            <template slot-scope="scope">
                                <el-button type="text" @click="dialogFormVisible()">编辑</el-button>
                                <el-button @click="handleDelete(scope.row.wl_eno)" type="text" size="small">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div v-if="rechange" title="修改信息" class="put">
                        <el-form label-width="100px" class="demo-ruleForm">
                            <el-form-item label="发布单位" label-width="120px" style="width: 70%;" prop="wl_company">
                                <el-input v-model="updata.wl_company"></el-input>
                            </el-form-item>
                            <el-form-item label="货物类型" label-width="120px" style="width: 80%;" prop="wl_hwstyle">
                                <el-input v-model="updata.wl_hwstyle"></el-input>
                            </el-form-item>
                            <el-form-item label="货物数量(吨)" label-width="150px" style="width: 90%;" prop="wl_ton">
                                <el-input v-model="updata.wl_ton"></el-input>
                            </el-form-item>
                            <el-form-item label="货物来源地" label-width="140px" style="width: 100%;" prop="wl_source">
                                <el-input v-model="updata.wl_source"></el-input>
                            </el-form-item>
                            <el-form-item label="运送目的地" label-width="140px" style="width: 100%;" prop="wl_location">
                                <el-input v-model="updata.wl_location"></el-input>
                            </el-form-item>
                            <el-form-item label="车辆类型" prop="wl_car">
                                <el-input v-model="updata.wl_car"></el-input>
                            </el-form-item>
                            <el-form-item label="货物联系人" label-width="140px" style="width: 100%;" prop="wl_number">
                                <el-input v-model="updata.wl_number"></el-input>
                            </el-form-item>
                            <el-form-item label="联系人电话" label-width="140px" style="width: 100%;" prop="wl_telephone">
                                <el-input v-model="updata.wl_telephone"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="save">确 定</el-button>
                            <el-button @click="alive">取 消</el-button>
                        </div>
                    </div>
                </template>
            </el-main>
            <!--分页-->
            <el-footer class="footer" height="80px">
                <el-container>
                    <el-header class="fenye-ui">
                        <el-col class="col-left" :span="12">
                            <span>总计{{ tableData.light.length }}条物流信息</span>
                        </el-col>
                        <el-col class="col-right" :span="12">
                            <el-pagination :page-size="item" :total="tableData.light.length"
                                layout="total,prev, pager, next" :current-page="page" @current-change="change">
                            </el-pagination>
                        </el-col>
                    </el-header>
                    <el-main>
                        2022 &copy; HuiTong ParkingLot
                    </el-main>
                </el-container>
            </el-footer>
        </el-container>

    </el-card>
</template>
    
    
<script>
import axios from 'axios'
import { reactive, ref } from 'vue'

export default {

    setup() {
        //查询全部
        let tableData = reactive({ light: [] });
        let page = ref(1);
        let item = ref(7);
        let tianjia = ref(false);
        let rechange = ref(false);
        let state = ref(true)

        const change = (val) => {
            page.value = val
        };
        let rows = reactive({
            wl_company: '',
            wl_time: '',
            wl_hwstyle: '',
            wl_ton: '',
            wl_source: '',
            wl_location: '',
            wl_car: '',
            wl_number: '',
            wl_telephone: '',
            wl_eno: ''
        })
        //添加
        const handle = (row) => {
            rows = row;
            console.log(rows)
        };

        const ruleForm = reactive({

            wl_company: '',
            wl_time: '',
            wl_hwstyle: '',
            wl_ton: '',
            wl_source: '',
            wl_location: '',
            wl_car: '',
            wl_number: '',
            wl_telephone: ''

        })
        //修改
        const updata = reactive({
            wl_company: '',
            wl_time: '',
            wl_hwstyle: '',
            wl_ton: '',
            wl_source: '',
            wl_location: '',
            wl_car: '',
            wl_number: '',
            wl_telephone: '',
            wl_eno: ''
        })

        axios({
            method: 'get',//请求类型
            url: 'http://localhost:8081/wliutb/cha'
        }).then(response => {
            // console.log(response);
            tableData.light = response.data.data;
        })

        //删除功能
        let wl_eno = ref("")
        const handleDelete = (id) => {
            let wl_eno = Number.parseInt(id)
            fetch(`http://localhost:8081/wliutb/shan/${wl_eno}`, {
                method: 'delete',
                headers: {
                    'Content-Type': 'application/json'
                },
            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert(data.message)

                        axios({
                            method: 'get',//请求类型
                            url: 'http://localhost:8081/wliutb/cha'
                        }).then(response => {
                            tableData.light = response.data.data;
                        })
                    }
                });
        }
        //添加
        const dialogVisible = () => {

            axios({
                method: 'post',
                url: "http://localhost:8081/wliutb/tianjia",
                data: {

                    wl_company: ruleForm.wl_company,
                    // wl_time: ruleForm.wl_time,
                    wl_hwstyle: ruleForm.wl_hwstyle,
                    wl_ton: ruleForm.wl_ton,
                    wl_source: ruleForm.wl_source,
                    wl_location: ruleForm.wl_location,
                    wl_car: ruleForm.wl_car,
                    wl_number: ruleForm.wl_number,
                    wl_telephone: ruleForm.wl_telephone

                }
            }).then(res => {

                alert(res.data.data)

            })
            if (tianjia.value) {

                tianjia.value = false

            } else {
                tianjia.value = true
            }
        }

        //修改
        let index = ref(null);
        const dialogFormVisible = () => {

            rechange.value = true;

            updata.wl_company = v.wl_company
            updata.wl_hwstyle = v.wl_hwstyle
            updata.wl_ton = v.wl_ton
            updata.wl_source = v.wl_source
            updata.wl_location = v.wl_location
            updata.wl_car = v.wl_car
            updata.wl_number = v.wl_number
            updata.wl_telephone = v.wl_telephone

        }

        const rek = () => {
            axios({
                method: 'put',//请求类型
                url: 'http://localhost:8081/wliutb/xiugai',
                data: {
                    "wl_car": `${updata.wl_car}`,
                    "wl_company": `${updata.wl_company}`,
                    "wl_hwstyle": `${updata.wl_hwstyle}`,
                    "wl_location": `${updata.wl_location}`,
                    "wl_number": `${updata.wl_number}`,
                    "wl_source": `${updata.wl_source}`,
                    "wl_telephone": `${updata.wl_telephone}`,
                    "wl_ton": `${updata.wl_ton}`,
                    "wl_eno": `${rows.wl_eno}`

                },
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                // console.log(response);
                console.log(response.data.data)
                tableData.light = response.data.data;
            })
        };

        const alive = () => {
            rechange.value = false;
        }
        //修改-页面刷新
        const save = () => {
            rek();
            location.reload();
            alive();
        }

        //模糊查询


        let searchcon = ref("");

        const sou = () => {

            axios({
                method: "get",
                url: "http://localhost:8081/wliutb/findByNumber?word=" + `${searchcon.value}`,
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                console.log(response.data);
                tableData.light = response.data.data;
               // $store.state.result = response.data.data;




            })

        }


        return {
            tableData,
            item,
            page,
            change,
            wl_eno,
            handleDelete,
            tianjia,
            dialogVisible,
            ruleForm,
            dialogFormVisible,
            updata,
            save,
            handle,
            rechange,
            alive,
            rows,
            state,
            sou,
            searchcon

        }
    },

}


</script>
    
    
    
<style scoped>
/*子页面卡片* */
.el-card {
    margin-top: 5px;
    height: 62 0px;
    margin-left: 0px;

    border-radius: 30px;

}

/**卡片中的整体布局 */
.el-container {
    padding: 2;
    margin: 0;
}

/**布局中 容器头部--包含面包屑，输入框 */
.el-header {
    max-height: 24px;

}

/**面包屑 */
.el-icon-arrow-right {
    margin-left: 100px;
    text-align: center;
    align-items: center;
}

/* 搜索框 */
.sousuo {
    display: flex;
    /**水平对齐 -靠左*/
    justify-content: flex-start;
}

/* 搜索输入框 */
.sousuo input {

    border-color:gainsboro
    
}

/* 添加按钮 */
.tianjia-anniu {

    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 15px;

}

/**容器中间 表格 */
.el-main {
    height: 520px;

}

.el-footer {
    height: 250px;

}

/**容器 底部*/

.col-right {

    margin-top: 8px;
    font-size: 20px;

}

.col-left {
    color: rgb(130, 152, 207);
    font-size: 18px;
    margin-top: 8px;
    letter-spacing: 2px;
}

/**弹框 */
.tankuang {
    border-radius: 30px
}

/**弹框-“添加”字体 */
.tankuang {
    font-family: "微软雅黑"
}
/* 修改弹出的表格 */
.put {
    z-index: 10;
    width: 500px;
    height: 410px;
    border: 1px solid rgba(4, 169, 251, 0.053);
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 2px 12px 0 rgba(226, 17, 241, 0.1);
    padding: 30px;
    position: relative;
    bottom: 480px;
    left: 15%;
}
</style>